<!--  -->
<template>
  <div class="profile">
      <!-- <HeaderTop title="个人中心"></HeaderTop> -->
      <section class="profile_info">
        <div class="profile_info_top">
          <div class="profile_info_login">
            <img class="avatar" :src="profileInfo.picUrl" alt="">
            <div class="namePhone">
              <p class="noneId" v-if="!profileInfo.id" @click="$router.push('/login')">登录 / 注册</p>
              <p class="nickName" v-if="profileInfo.id">{{profileInfo.nickName || '昵称'}}</p>
              <p v-if="profileInfo.id">{{profileInfo.phone || '手机号'}}</p>
            </div>
            <img class="shezhi" src="./img/shehzi.png" alt="" @click="$router.push('/modiinfo')">
          </div>
          <div class="profile_info_list">
            <ul class="profile_info_list_box">
              <li>
                <a href="javascript:;" @click="gotoOrder(1)">
                  <img src="./img/fukuan.png" alt="">
                  <p>待付款</p>
                </a>
              </li>
              <li>
                <a href="javascript:;" @click="gotoOrder(2)">
                  <img src="./img/fahuo.png" alt="">
                  <p>待发货</p>
                </a>
              </li>
              <li>
                <a href="javascript:;" @click="gotoOrder(3)">
                  <img src="./img/shouhuo.png" alt="">
                  <p>待收货</p>
                </a>
              </li>
              <li>
                <a href="javascript:;" @click="gotoOrder(4)">
                  <img src="./img/pingjia.png" alt="">
                  <p>待评价</p>
                </a>
              </li>
              <li>
                <a href="javascript:;" @click="gotoOrder(5)">
                  <img src="./img/tuikuan.png" alt="">
                  <p style="margin-left:6px">退款</p>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="profile_info_bottom">
          <div class="profile_info_bottom_left" @click="$router.push('/myinvitation')">
            <div class="left">
              <h3>邀请好友 <span>HOT</span></h3>
              <p>邀请好友获奖励</p>
            </div>
            <img src="./img/zhankai.png" alt="">
          </div>
          <div class="profile_info_bottom_right" @click="$router.push('/partner')">
            <div class="right">
              <h3>合伙人中心</h3>
              <p>合伙人中心</p>
            </div>
            <img src="./img/zhankai.png" alt="">
          </div>
        </div>
      </section>
      <section class="profile_my_order">
        <van-cell title="所有订单" is-link to="/myorder?id=0" />
        <van-cell title="我的消息" is-link to="/message" />
        <van-cell title="我的优惠券" is-link to="/coupon" />
        <van-cell title="产品收藏" is-link to="/collect" />
        <van-cell title="收货地址" is-link to="/addresslist" />
        <van-cell title="修改绑定手机号" is-link to="/modiphonenum" />
        <van-cell title="修改密码" is-link to="/modipwd" />
        <van-cell title="意见反馈" is-link to="/advice" />
      </section>
  </div>
</template>

<script>
// import HeaderTop from '../../components/HeaderTop/HeaderTop'
import {mapState} from 'vuex'
export default {
  data () {
    return {
      profileInfo:{},
      userId:'',
      token:''
    }
  },

  // components: {
  //   HeaderTop
  // },

  computed: {
    ...mapState(['userInfo'])
  },
  mounted(){
    // alert('111')
    if(this.userInfo.token){
      this.getAvatar()
    }
  },
  methods: {
    gotoOrder(active){
      console.log(active)
      this.$router.push({path:'/myorder',query:{id:active}})
    },
    async getAvatar(){
      this.userId = localStorage.getItem('userId')
      this.token = localStorage.getItem('token')
      // this.userId = this.userInfo.userInfo.id
      // this.token = this.userInfo.token
      // alert('个人信息')
      const result = await this.API.reqAvatar({userId:this.userId,token:this.token})
      if(result.retCode === '000'){
        // alert('名称',result.retData)
        this.profileInfo = result.retData
        console.log(this.profileInfo)
      }
    },
  }
}

</script>
<style lang='stylus' scoped>
  @import "../../common/stylus/mixins.styl"
  .profile
    // margin-top 45px
    padding-bottom 0 !important
    width 100%
    padding-bottom 100px
    overflow hidden
    .profile_info
      position relative
      width 100%
      height 243px
      background #145B3E
      .profile_info_top 
        position absolute
        top 15px
        left 15px
        right 15px
        bottom 90px
        height 153px
        background #fff
        border-radius 10px
        .profile_info_login
          display flex
          // line-height 85px
          height 85px
          .avatar
            width 62px
            height 62px
            margin 11px 20px 0
            background #145B3E
            border-radius 62px
          .namePhone
            height 85px
            line-height 30px
            font-weight bold
            font-size 16px
            margin-top 10px
            width 50%
            .noneId
              height 85px
              margin-top 15px
            .nickName
              white-space nowrap
              text-overflow ellipsis
              overflow hidden
          .shezhi
            position absolute
            width 20px
            height 20px
            top 30px
            right 30px
        .profile_info_list
          margin 0 22px
          .profile_info_list_box
            display flex
            justify-content space-around
            height 68px
            li
              display flex
              margin-top 5px
              img 
                width 24px
                height 24px
                margin-left 6px
                margin-bottom 8px
              p
                font-size 12px
                color #000
      .profile_info_bottom
        position absolute
        bottom 0
        left 0
        right 0
        color #ffffff
        font-size 12px
        display flex
        justify-content center
        padding 10px
        background #2c6c52
        .profile_info_bottom_left
          display flex
          justify-content space-between
          border-right 2px solid #ffffff
          width 50%
          .left
            margin-left 10px
            h3
              margin-top 5px
              font-size 12px
              span
                background red
                padding 1px 7px
                border-radius 10px
            p
              margin-top 5px
              transform scale(0.9)
              margin-left -5px
          img 
            height 12px
            margin-right 10px
            margin-top 14px
        .profile_info_bottom_right
          display flex
          justify-content space-between
          width 50%
          .right
            margin-left 15px
            h3
              margin-top 5px
              font-size 12px
            p
              margin-top 5px
              transform scale(0.9)
              margin-left -3px
          img 
            height 12px
            margin-top 14px
            margin-right 10px
    .profile_my_order
      padding 15px
      padding-bottom 50px
</style>